
import React, { useState, useEffect } from 'react';
import { getTimeList, ListItem, minuteProps } from './interface';
import './index.less';

const MinutePage = (props: minuteProps) => {
	const { active, change, year, month, day, hour, limit } = props;
	const [list, setList] = useState(
		getTimeList(59, year, month, day, hour, active, limit)
	);

	function activeChange(params: ListItem) {
		change(params);
	}
	// render List
	function renderList() {
		return list.map((item, index) => {
			return (
				<span
					onClick={activeChange.bind(this, item)}
					key={index}
					className={`datepicker-minute-item ${
						item.value === active ? 'datepicker-minute-active' : ''
					}`}
				>
					{item.label}
				</span>
			);
		});
	}
	// 时间变化监听
	useEffect(() => {
		let newList = getTimeList(59, year, month, day, hour, active, limit);
		let checkList = newList.filter((item) => {
			return item.value === active;
		});
		if (checkList.length < 1 && newList.length > 0) {
			activeChange(newList[0]);
		}
		setList(newList);
	}, [year, month, day, hour, active]);

	return <div className="datepicker-minute">{renderList()}</div>;
};
export default MinutePage;
